<template>
  <div class="allinfo"
       style="height:900px">
    <!-- 第一行 -->
    <div class="firstline">
      <span style="font-weight:bold;position: relative; margin-left:20px;top:15px">新增打包单</span>
      <div class="submitandcancel">
        <el-button type="primary"
                   @click="commit()"
                   icon="el-icon-s-promotion">提交</el-button>
        <el-button type="primary"
                   @click="cancel()"><i class="el-icon-s-release"></i>取消</el-button>
      </div>
    </div>
    <hr>
    <!-- 基本信息栏 -->
    <div>
      <!-- 第二行 -->
      <div>
        <span class="infoborder">基本信息</span>
      </div>
      <!-- 选填信息 -->
      <div style="margin-top:20px">
        <el-form :inline="true"
                 label-width="80px"
                 :model="formLabelAlign">
          <el-row>
            <el-col :span="7">
              <el-form-item label="表单类型">
                <el-select v-model="bigpackdata.formTypes"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.formTypes"
                             :key="item.label"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    style="margin-left:70px">
              <el-form-item label="制单人">
                <el-input v-model="bigpackdata.createdBy"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7">
              <el-form-item label="制单时间">
                <el-input v-model="bigpackdata.createdTime"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7"
                    style="margin-left:1px">
              <el-form-item label="单号">
                <el-input v-model="bigpackdata.packingNumber"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    style="margin-left:55px">
              <el-form-item label="客户">
                <el-select v-model="bigpackdata.customer "
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.customer"
                             :key="item.label"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    style="margin-left:0px">
              <el-form-item label="区域">
                <el-select v-model="bigpackdata.region"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.region"
                             :key="item.label"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="7">
              <el-form-item label="打包总重">
                <el-input v-model="bigpackdata.weight"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="7"
                    style="margin-left:55px">
              <el-form-item label="产品数量">
                <el-input v-model="bigpackdata.nums"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7"
                    style="margin-left:55px">
              <el-form-item label="总打包费">
                <el-input v-model="bigpackdata.processCost"
                          :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
      </div>
    </div>
    <!-- 产品信息栏 -->
    <div>
      <div>
        <div style="height:40px">
          <span class="infoborder">产品信息</span>
          <el-button type="primary"
                     style="float:right"
                     @click="drawer = true,pack()">
            <i class="el-icon-circle-plus-outline" />打包
          </el-button>
          <el-button type="primary"
                     style="float:right"
                     @click="table = true;find()">
            <i class="el-icon-circle-plus-outline" />添加
          </el-button>
        </div>

        <!-- 抽屉弹出内容 -->
        <el-drawer title="分包单打包"
                   :visible.sync="drawer"
                   :before-close="handleClose">

          <el-form :inline="true"
                   label-width="80px"
                   :model="formLabelAlign">

            <el-row>
              <el-col>
                <el-form-item label="制单时间">
                  <el-input v-model="packdata.createdTime"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="margin-left:1px">
                <el-form-item label="主包单号">
                  <el-input v-model="packdata.packngId"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="margin-left:1px">
                <el-form-item label="分包单号">
                  <el-input v-model="packdata.packingNum"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="margin-left:1px">
                <el-form-item label="创建人">
                  <el-input v-model="packdata.createdBy"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="margin-left:1px">
                <el-form-item label="总重量">
                  <el-input v-model="packdata.weight"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="margin-left:1px">
                <el-form-item label="总数量">
                  <el-input v-model="packdata.nums"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col style="margin-left:1px">
                <el-form-item label="打包费">
                  <el-input v-model="packdata.processCost"
                            :disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item label="仓库">
                  <el-select v-model="packdata.warehouse"
                             placeholder="请选择">
                    <el-option v-for="item in formLabelAlign.warehouse"
                               :key="item.label"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <!-- 分包状态 -->
              <!-- <el-col style="margin-left:55px">
              <el-form-item label="状态">
                <el-select v-model="formstatus"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.status"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
              <!-- 部门 -->
              <!-- <el-col style="margin-left:0px">
              <el-form-item label="部门">
                <el-select v-model="formdata.department"
                           placeholder="请选择">
                  <el-option v-for="item in formLabelAlign.department"
                             :key="item.label"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->

            </el-row>

          </el-form>
          <!-- 抽屉确定按钮 -->
          <el-button @click="insertPackingMsg()">确定</el-button>
          <el-button @click="cancelInsert()">取消</el-button>
        </el-drawer>
        <!-- 弹出框内容 -->
        <el-drawer title="选择客户的商品"
                   :visible.sync="table"
                   direction="ttb"
                   size="50%"
                   fullscreen="true">
          <el-table ref="multipleTable"
                    :data="gridData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column type="selection"
                             width="55">
            </el-table-column>
            <el-table-column label="序号"
                             width="120"
                             prop="id">
            </el-table-column>
            <el-table-column prop="productDto.productInfo"
                             label="产品编号"
                             width="150">
            </el-table-column>
            <el-table-column prop="productDto.productName"
                             label="产品名称"
                             width="150">
            </el-table-column>
            <el-table-column prop="productDto.customer"
                             label="客户">
            </el-table-column>
            <el-table-column prop="productDto.condition"
                             label="成色"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="productDto.weight"
                             label="重量"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="nums"
                             label="数量"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px;margin-left:800px">
            <el-button @click="insert()">确定</el-button>
            <el-button @click="table = false">取消</el-button>
          </div>
        </el-drawer>
      </div>

      <!-- 产品信息 -->
      <el-table :data="selectorderlist"
                style="width: 100%">
        <el-table-column prop="id"
                         type="index"
                         label="序号"
                         width="50">
        </el-table-column>
        <el-table-column prop="productDto.productInfo"
                         label="产品信息">
        </el-table-column>
        <el-table-column prop="productDto.productName"
                         label="产品名称">
        </el-table-column>
        <el-table-column prop="productDto.productCode"
                         label="条码">
        </el-table-column>
        <el-table-column prop="productDto.customer"
                         label="客户">
        </el-table-column>
        <el-table-column prop="productDto.region"
                         label="区域">
        </el-table-column>
        <el-table-column prop="productDto.condition"
                         label="成色">
        </el-table-column>
        <el-table-column prop="productDto.weight"
                         label="重量"
                         width="50">
        </el-table-column>
        <el-table-column prop="nums"
                         label="数量"
                         width="50">
        </el-table-column>
        <el-table-column prop="productDto.perGram"
                         label="克工费"
                         width="100">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click.native.prevent="deleteRow(scope.$index, selectorderlist)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 打包信息列表 -->
      <div style="height:40px">
        <span class="infoborder">打包信息</span>
        <!-- <el-button type="primary"
                     style="float:right"
                     @click="table = true;find()">
            <i class="el-icon-circle-plus-outline" />添加
          </el-button> -->
      </div>
      <el-table :data="packproductlist"
                style="width: 100%">
        <el-table-column prop="packingNum"
                         label="打包编号">
        </el-table-column>
        <el-table-column prop="warehouse"
                         label="仓库">
        </el-table-column>

        <el-table-column prop="weight"
                         label="重量"
                         width="100">
        </el-table-column>
        <el-table-column prop="nums"
                         label="数量"
                         width="100">
        </el-table-column>
        <el-table-column prop="processCost"
                         label="分包打包费"
                         width="100">
        </el-table-column>
        <el-table-column prop="createdTime"
                         label="创建时间">
          <template slot-scope="scope">
            {{scope.row.createdTime.substring(0, 19)
              .replace('T', ' ')}}
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger"
                       icon="el-icon-delete"
                       circle
                       @click.native.prevent="deleteRowPack(scope.$index, packproductlist)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="1"
                     :page-sizes="[10, 20, 30]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="count">
      </el-pagination>
    </div>
    <!-- <button @click="test">测试</button> -->
  </div>
</template>

<script>
import addPacking from '@/api/sale/packing/addPacking'
import packingList from '@/api/sale/packing/packingList'
export default {
  data() {
    return {
      //抽屉状态
      drawer: false,
      //选货单状态
      formstatus: '',
      //制单时间
      makingtime: this.getTime(),
      count: 0,
      //将基础信息和产品信息同时传过去
      selectgoodsinfo: {
        basicinfo: {},
        goodsinfo: {},
      },
      //打包信息
      packdata: {
        warehouse: '', //仓库
        region: 0, //区域
        createdBy: 'CHL',
        weight: '',
        nums: '',
        processCost: '', //打包费
        packngId: '', //这是大包的产品编号 用来区分到底是哪个大包下面的小包
        packingNum: '',
        createdTime: '',
        //被选中产品id
        packingId: [],
      },
      // 大的打包单
      bigpackdata: {
        formTypes: '', //表单类型
        packingNumber: '', //打包单编号
        customer: '', //客户
        region: '', //区域
        createdBy: 'CHL', //打包单制作人
        createdTime: '', //打包单创建时间
        weight: 0, //分包重量之和
        nums: 0, //分包数量
        processCost: 0, // 总的打包费
        packingStatus: 1, //打包单状态  表示编辑状态
        pid: 45, //传过来的选货单id
      },
      // 基础信息
      formdata: {
        goodstype: '',
        client: '',
        purity: '',
        ordernum: this.createOrder(),
        documentmaker: '',
      },

      //选择下拉框
      formLabelAlign: {
        name: '',
        type: 'aaa',
        formTypes: [
          {
            label: '采购入库',
            value: 1,
          },
          {
            label: '采购退货',
            value: 2,
          },
        ],
        customer: [
          {
            label: '中国黄金',
            value: 1,
          },
          {
            label: '老凤祥',
            value: 2,
          },
          {
            label: '周大福',
            value: 3,
          },
          {
            label: '盛丰黄金',
            value: 4,
          },
        ],
        warehouse: [
          {
            label: 'A仓库',
            value: 1,
          },
          {
            label: 'B仓库',
            value: 2,
          },
        ],
        region: [
          {
            label: '华南区域',
            value: 1,
          },
          {
            label: '东北区域',
            value: 2,
          },
          {
            label: '西南区域',
            value: 2,
          },
        ],
      },

      //产品栏展示的内容
      selectorderlist: [],
      //打包栏展示的内容
      packproductlist: [],
      // 添加商品信息
      table: false,
      loading: false,
      //弹出框展示的内容
      gridData: [],
      //已勾选的产品内容
      multipleSelection: [],
    }
  },
  methods: {
    //抽屉相关方法
    //插入打包信息表
    insertPackingMsg() {
      if (this.selectorderlist.length != 0) {
        //前端传  2022-04-22 16:51:16时间 ，后端不能接收，
        //必须把中间的空格替换成T  变成2022-04-22T16:51:16,后端才可以转换对应的参数
        this.packdata.createdTime = this.packdata.createdTime.replace(' ', 'T')
        console.log(this.packdata.createdTime)
        addPacking.insertPackingMsg(this.packdata).then((res) => {
          console.log(res)
          this.$message.success(res.message)
          addPacking
            .selectPackingMsgByPackingNum(this.packdata.packngId)
            .then((res) => {
              console.log(res)
              let data2 = res.data
              for (const index in data2) {
                if (data2[index].warehouse == 1) {
                  data2[index].warehouse = 'A仓库'
                }
                if (data2[index].warehouse == 2) {
                  data2[index].warehouse = 'B仓库'
                }
                if (data2[index].warehouse == 3) {
                  data2[index].warehouse = 'C仓库'
                }
              }
              console.log(data2)
              this.packproductlist = data2
              //点击打包的确定按钮后计算总重
              //遍历获得选中的重量
              let weightcount = 0
              let numscount = 0
              let processCostcount = 0
              for (let i = 0; i < this.packproductlist.length; i++) {
                weightcount = this.packproductlist[i].weight + weightcount
                numscount = this.packproductlist[i].nums + numscount
                processCostcount =
                  this.packproductlist[i].processCost + processCostcount
              }
              this.bigpackdata.weight = weightcount
              this.bigpackdata.nums = numscount
              this.bigpackdata.processCost = processCostcount
              //清空产品信息列表
              this.selectorderlist = []
            })
            .catch((e) => {
              this.$message.success('小包查询失败')
            })
        })
      } else {
        //限定必须先要选定需要打包的商品才能进行打包操作
        this.$message.success('请先选择需要打包的商品')
      }

      // // 新增一个打包单
      // packingList.insertPackingList(this.bigpackdata).then((res)=>{
      //   console.log(res);
      // })
    },
    // 关闭抽屉显示打包页面
    cancelInsert() {
      this.drawer = false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 打包方法
    pack() {
      console.log('打包方法点击事件')
      // console.log(this.selectorderlist[0].id);
      this.packdata.createdTime = this.getTime()
      // console.log(this.packdata.createdTime);
      let weightcount = 0
      let numscount = 0
      //遍历获得选中的重量
      for (let i = 0; i < this.selectorderlist.length; i++) {
        weightcount = this.selectorderlist[i].productDto.weight + weightcount
        numscount = this.selectorderlist[i].nums + numscount
        this.packdata.packingId[i] = this.selectorderlist[i].id
      }
      this.packdata.weight = weightcount
      this.packdata.nums = numscount
      this.packdata.processCost = (
        (this.packdata.weight * this.packdata.nums) /
        3
      ).toFixed(2)
      this.packdata.packingNum = this.createOrder()
      // console.log(this.packdata.packingId)
    },

    test() {
      // console.log(this.$data.formstatus)
      // console.log(this.$data.formdata.status)
      console.log(this.formdata.status)
    },

    //删除产品信息当前行
    deleteRowPack(index, rows) {
      console.log('delete')
      rows.splice(index, 1)
      var packproductlist = this.packproductlist
      console.log(this.packproductlist)
      this.count = this.packproductlist.length
    },

    //取消按钮返回搜索页面
    cancel() {
      this.$router.push({ path: 'selectgoodslist' })
    },

    //将复选的产品放入产品信息栏

    insert() {
      console.log(this.$data.selectorderlist)
      for (var i in this.multipleSelection) {
        this.selectorderlist.push(this.multipleSelection[i])
      }
      console.log(this.selectorderlist)
      this.count = this.selectorderlist.length
      this.$data.table = false
      this.$message.success('添加成功')
    },

    //点击添加按钮之后展示的选货单所选商品的信息
    find() {
      // console.log(this.$data.formdata)
      let id = this.bigpackdata.pid
      addPacking.getProduct(id).then((res) => {
        console.log(res);
        this.gridData = res.data
      })
    },
    //提交
    commit() {
      this.$confirm('此操作将提交本页信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          //时间格式处理
          this.bigpackdata.createdTime = this.bigpackdata.createdTime.replace(' ','T')
          //发请求新增打包
          console.log(this.bigpackdata+"提交按钮请求发送")
          packingList
            .insertPackingList(this.bigpackdata)
            .then((res) => {
              console.log('提交按钮')
              console.log(res)
              this.$message({
                type: 'success',
                message: '提交成功!',
              })
            })
            .catch(() => {
              this.$message({
                type: 'primary',
                message: '提交失败!',
              })
            })
          //跳转到打包单管理页面
          this.$router.push({ path: '/packingList' })
          // this.$router.push({ path: 'demandList' })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消提交',
          })
        })
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 全选功能方法
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //获取当前制表时间
    getTime() {
      var date1 = new Date()
      var year = date1.getFullYear()
      var month = date1.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      var day = date1.getDate()
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      var hours = date1.getHours()
      if (hours >= 1 && hours <= 9) {
        hours = '0' + hours
      }
      var minutes = date1.getMinutes()
      if (minutes >= 1 && minutes <= 9) {
        minutes = '0' + minutes
      }
      var seconds = date1.getSeconds()
      if (seconds >= 1 && seconds <= 9) {
        seconds = '0' + seconds
      }
      return (
        year +
        '-' +
        month +
        '-' +
        day +
        ' ' +
        hours +
        ':' +
        minutes +
        ':' +
        seconds
      )
    },

    //生成分包订单号
    createOrder() {
      var date = new Date()
      var ordernum = 'SP' + date.getTime()
      // console.log(date)
      return ordernum
    },
    //生成主包订单号
    createOrderLP() {
      var date = new Date()
      var ordernum = 'LP' + date.getTime()
      // console.log(date)
      return ordernum
    },
  },
  created() {
    //获取选货单页面传过来的选货单的id
    this.bigpackdata.pid = this.$route.query.soId
    console.log(this.bigpackdata.pid + '路由传参')
    this.packdata.packngId = this.createOrderLP()
    this.bigpackdata.packingNumber = this.packdata.packngId
    this.bigpackdata.createdTime = this.getTime()
  },
}
</script>

<style scoped>
.submitandcancel {
  float: right;
  margin-top: 10px;
}
.allinfo {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.infoborder {
  border-style: solid;
  padding-left: 10px;
  margin-left: 10px;
  border-color: white white white skyblue;
}
.firstline {
  height: 50px;
}
</style>
